<template>
  <div id="dialogAddEdit">
    <el-dialog
      class="about-set"
      :title="`添加${channel}标签推荐`"
      :visible.sync="dialogData.isShow"
      width="510px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="75px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="contentCategoryLabelId">
            <el-select
              v-model="ruleForm.contentCategoryLabelId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in tagCategoryIdList"
                :key="item.id"
                :label="item.labelCategoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="labelName.id">
            <el-select
              v-model="ruleForm.labelName"
              filterable
              placeholder="请选择"
              value-key="id"
              clearable
            >
              <el-option
                v-for="item in labelNameList"
                :key="item.id"
                :label="`${item.labelName}-${item.id}`"
                :value="item"
                >{{ item.labelName }}-{{ item.id }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="推荐状态" prop="enabled">
            <el-radio-group v-model="ruleForm.enabled">
              <el-radio
                v-for="item in enabledList"
                :key="item.dictValue"
                :label="item.dictValue"
              >
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="ruleForm.remark"
              maxlength="15"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { add } from '@/api/contentTags/recomment' // 接口
import {
  getClasses,
  getLabels,
  getShowTagLabels
} from '@/api/contentTags/configureTag' // 接口
export default {
  name: 'DialogAddEdit',
  msg: '标签管理-新增弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      channel: '', //频道
      tagCategoryIdList: [], // 分类列表
      labelNameList: [
        // 标签名称列表
        { labelName: '-- 请选择标签名 --', id: '' }
      ],
      enabledList: [], // 状态
      ruleForm: {
        contentCategoryLabelId: '', // 标签分类
        labelName: {}, // 标签对象
        enabled: null, // 推荐状态
        remark: '' //备注
      },
      rules: {
        contentCategoryLabelId: {
          required: true,
          message: '请选择分类名称',
          trigger: 'blur'
        },
        'labelName.id': {
          required: true,
          message: '请选择标签名称',
          trigger: 'blur'
        },
        enabled: { required: true, message: '请选择推荐状态', trigger: 'blur' }
      },
      defaultClassifiName: {
        //默认值
        labelCategoryName: '-- 请选择标签分类 --',
        id: ''
      },
      defaultLabelName: {
        //默认值
        labelName: '-- 请选择标签名 --',
        id: ''
      }
    }
  },
  watch: {
    'ruleForm.contentCategoryLabelId': {
      //标签分类
      handler(newVal, oldVal) {
        this.labelNameList = [this.defaultLabelName]
        this.ruleForm.labelName = this.defaultLabelName
        if (newVal) {
          //标签名
          this.getNameList(newVal)
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.dialogData.channelName) {
      this.channel = `【${this.dialogData.channelName}】`
    }
    this.getTagCategoryIdList()
    this.ruleForm.labelName = this.defaultLabelName
    this.getStateList()
  },
  methods: {
    async getStateList() {
      // 话题状态
      let data2 = await sysNormalDisable('sys_labels_statu')
      this.enabledList = this.enabledList.concat(data2)
      this.ruleForm.enabled = this.enabledList[0].dictValue
    },
    /*获取分类列表*/
    getTagCategoryIdList() {
      let obj = {
        labelCategoryProperty: this.dialogData.labelProperty
      }
      getClasses(
        obj,
        (response) => {
          this.tagCategoryIdList = [this.defaultClassifiName, ...response]
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /*获取标签名称列表*/
    getNameList(id) {
      let obj = {}
      if (this.channel) {
        //显性标签
        obj = {
          channel: this.dialogData.channel
        }
        getShowTagLabels(
          id,
          obj,
          (response) => {
            this.labelNameList = [this.defaultLabelName, ...response]
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      } else {
        //隐性标签
        obj = {
          isRecommend: false
        }
        getLabels(
          id,
          obj,
          (response) => {
            this.labelNameList = [this.defaultLabelName, ...response]
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      }
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.labelProperty = ''
      this.dialogData.channel = ''
      this.dialogData.channelName = ''
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = {
            labelProperty: this.dialogData.labelProperty, //属性
            contentLabelId: this.ruleForm.labelName.id, //标签Id
            labelRecommendName: this.ruleForm.labelName.labelName //标签名称
          }
          let channel = this.dialogData.channel
          if (channel) {
            obj.channel = channel //频道
          }
          let params = { ...this.ruleForm, ...obj }
          params.enabled = eval(params.enabled)
          delete params.labelName
          /*console.log(params)*/
          add(
            params,
            (response) => {
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.$message.warning(response.message)
              this.loading = false
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
// #dialogAddEdit {
// }
</style>
